<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Line-Up</title>
<meta name="generator" content="TextPad 5.0.3">
<meta name="author" content="Mike S">
<meta name="keywords" content="pbliga.com line-up players positions">
<meta name="description" content="Free">
<script>
var imageSourcePrefix = 'http://pbliga.com/field.php?pos=';
var imageSourceSuffixDef = '&m=def';
var positionArray = [
  ['LB', 'LD', 'LDM', 'LCD', 'SW', 'CD', 'DM', 'RCD', 'RDM', 'RD', 'RB'],
  ['LW', 'LM', 'LAM', 'LCM', 'CM', 'AM', 'RCM', 'RAM', 'RM', 'RW'],
  ['LF', 'CF', 'ST', 'RF'],
];
var separator = '|';
function lineUp(lineUpStr) {
  var line;
  var lineIndex;
  var position;
  var posIndex;
  var lineContainerAtt = null;
  var lineContainerDef = null;
  var mainContainerAtt = document.getElementById('attack');
  var mainContainerDef = document.getElementById('defence');
  resetContainer(mainContainerAtt);
  resetContainer(mainContainerDef);
  for(lineIndex in positionArray) {
    line = positionArray[lineIndex];
    for(posIndex in line) {
      position = line[posIndex];
      if(lineUpStr.indexOf(position) == 0 || lineUpStr.indexOf(separator + position) > -1) {
        if(lineContainerAtt == null || lineContainerDef == null) {
          lineContainerAtt = document.createElement('div');
          lineContainerDef = document.createElement('div');
        }
        createImage(lineContainerAtt, imageSourcePrefix + position, position);
        createImage(lineContainerDef, imageSourcePrefix + position + imageSourceSuffixDef, position);
      }
    }
    if(lineContainerAtt != null) {
      mainContainerAtt.appendChild(lineContainerAtt);
      lineContainerAtt = null;
    }
    if(lineContainerDef != null) {
      mainContainerDef.appendChild(lineContainerDef);
      lineContainerDef = null;
    }
  }
}
function createImage(containerElement, imageSource, altText) {
  var imageElement = document.createElement('img');
  imageElement.src = imageSource;
  if(altText) imageElement.title = altText;
  containerElement.appendChild(imageElement);
}
function resetContainer(containerElement) {
  containerElement.innerHTML = '';
}
function checkLocation() {
  var queryStr = document.location.search;
  if(queryStr.length > 1) {
    var queryLineUp = queryStr.substring(1, queryStr.length);
    document.getElementById('lineUp').value = queryLineUp;
    lineUp(queryLineUp);
  }
}
</script>
</head>

<body onload="checkLocation()">
<div style="width:100%; text-align:center;">
<input type="text" id="lineUp" name="lineUp" size="70"/>
<button onclick="lineUp(document.getElementById('lineUp').value)">-&gt;</button>
</div>
<div style="width:100%; text-align:center;"><strong>ATTACK</strong></div>
<div style="width:100%; text-align:center;" id="attack"></div>
<div style="width:100%; text-align:center;"><strong>DEFENCE</strong></div>
<div style="width:100%; text-align:center;" id="defence"></div>
</body>
</html>
